import React from 'react';
import { connect } from 'react-redux';
import { Redirect } from 'react-router-dom';
import { actionCreators } from './store';
import { LoginWrapper, LoginBox, Input, Button } from './style';
class Login extends React.PureComponent {
  render() {
    const { isLogin } = this.props;
    if (isLogin) {
      return <Redirect to="/" />;
    } else {
      return (
        <LoginWrapper>
          <LoginBox>
            <Input
              placeholder="账号"
              ref={(input) => {
                this.account = input;
              }}
            />
            <Input
              placeholder="密码"
              ref={(input) => {
                this.password = input;
              }}
              type="password"
            />
            <Button
              onClick={() => {
                this.props.login(this.account, this.password);
              }}
            >
              登录
            </Button>
          </LoginBox>
        </LoginWrapper>
      );
    }
  }
}

const mapStateToProps = (state) => {
  return {
    isLogin: state.get('login').get('login'),
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    login(accountEle, passwordEle) {
      dispatch(actionCreators.login(accountEle.value, passwordEle.value));
    },
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(Login);
